<template>
  <div class="big-box">
    <div class="user-box">
      <div class="title">
        <router-link to="/login">登录</router-link>
        <span>·</span>
        <router-link to="/register">注册</router-link>
      </div>

      <!--formData是表单数据；myrules是验证规则  -->
      <el-form
        :model="formData"
        :rules="myrules"
        ref="myform"
        label-width="0px"
        class="demo-ruleForm"
      >
        <el-form-item label prop="regname">
          <el-input prefix-icon="el-icon-user-solid" v-model="formData.regname" placeholder="用户名"></el-input>
        </el-form-item>

        <el-form-item label prop="regpwd">
          <el-input
            prefix-icon="el-icon-lock"
            type="password"
            v-model="formData.regpwd"
            placeholder="密码"
            show-password
          ></el-input>
        </el-form-item>

        <el-form-item label prop="regpwd2">
          <el-input
            prefix-icon="el-icon-lock"
            type="password"
            v-model="formData.regpwd2"
            placeholder="确认密码"
            show-password
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="success" @click="regFn('myform')" class="reg-btn">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { register } from "@/api/admin.js";
export default {
  data() {
    // 自定义校验规则
    let regpass2 = (rule, value, callback) => {
      // 判断确认密码值2 是否和 密码1值相等
      if (value !== this.formData.regpwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      // 表单数据
      formData: {
        regname: "",
        regpwd: "",
        regpwd2: "",
      },

      // 验证规则
      myrules: {
        // 验证规则名字要和formData中一致, el-form-item的prop值必须也要和formData中一致
        // 每个验证规则是个数组，数组中有一个或多个对象；
        // required 必填； message验证不通过的提示；
        // trigger 触发方式：blur 失去焦点； change改变时触发
        regname: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "长度在 3 到 12 个字符",
            trigger: "blur",
          },
        ],

        // 密码验证？必填；6-12位
        regpwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            pattern: /^[a-zA-Z\d]{6,12}$/,
            message: "字母数字组成，长度6-12位",
            trigger: "blur",
          },
        ],

        // 确认密码
        regpwd2: [{ validator: regpass2, trigger: "blur" }],
      },
    };
  },

  methods: {
    // 点击提交按钮触发的事件
    regFn(formName) {
      this.$refs[formName].validate((valid) => {
        // 判断表单验证是否通过
        if (valid) {
          // 如果验证通过，把表单数据提交到后端
          
            register(this.formData).then((res) => {
              console.log(res.data);

              if (res.data.code === 0) {
                // 弹出信息
                this.$message({
                  message: "注册成功",
                  type: "success",
                });

                // 重置表单
                this.$refs[formName].resetFields();

                // 跳转到登录
                this.$router.push('/login')
              } else {
                // 注册不成功
                this.$message({
                  message: res.data.msg,
                  type: "warning",
                });
              }
            });
        } else {
          console.log("验证不通过");
          return false;
        }
      });
    },
  },
};
</script>


<style lang="scss" scoped>
// scoped 局部作用域

.big-box {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: url(../assets/images/bg.jpg);
  background-repeat: no-repeat;
  // contain 包含整个图片，不一定覆盖整个区域
  // cover 一定覆盖整个区域， 不一定包含整个图片
  background-size: cover;
}

.user-box {
  width: 300px;
  min-height: 300px;
  background-color: #fff;
  margin: 100px auto;
  padding: 20px 30px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px 5px #ddd;
  .title {
    text-align: center;
    a {
      font-size: 18px;
    }
    span {
      font-size: 24px;
      margin: 0 20px;
    }
  }
}

.router-link-active {
  color: orangered;
  font-weight: bold;
  border-bottom: 2px solid orangered;
  padding-bottom: 8px;
}

.demo-ruleForm {
  margin-top: 40px;
}

.reg-btn {
  width: 100%;
}
</style>